<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>DFO</title>
    <link rel="shortcut icon" href="./image/favicon_16x16.ico" type="image/x-icon">
</head>

<body>
    <div class="top_bar">
        <ul>
            <li class="f1">
                <a href="/" class="logo">
                    <img src="./image/img_logo_topbar.png" width="38" height="28" alt="DFO small logo">
                </a>
                <a href="/" class="billing">Purchase CERA</a>
            </li>
            <li class="fr">
                <a href="#" class="txt">Log in</a>
                <span class="divi">
                    <img src="./image/img_topbar_divi.png" alt="|">
                </span>
                <a href="#" class="txt">Register</a>
                <span class="divi">
                    <img src="./image/img_topbar_divi.png" alt="|">
                </span>
                <a href="#" class="txt">Support</a>
            </li>
        </ul>
    </div>
    <div id="wrap">
        <div class="container">
            <article class="intro">
                <div class="bgs">
                    <div class="bg1"></div>
                    <div class="bg2"></div>
                    <div class="bg3"></div>
                </div>
                <section class="intro1">
                    <h3 class="sp_int_title int1_title_sub js-ani"></h3>
                    <h1 class="int1_title_main js-int_title js-ani">
                        <i class="int1_title_main-ua">A</i>
                        <i class="int1_title_main-l">l</i>
                        <i class="int1_title_main-l">l</i>
                        <i class="int1_title_main-blank_small"> </i>
                        <i class="int1_title_main-s">s</i>
                        <i class="int1_title_main-h">h</i>
                        <i class="int1_title_main-a">a</i>
                        <i class="int1_title_main-l">l</i>
                        <i class="int1_title_main-l">l</i>
                        <i class="int1_title_main-l">l</i>
                        <i class="int1_title_main-blank_small"> </i>
                        <i class="int1_title_main-b">b</i>
                        <i class="int1_title_main-e">e</i>
                        <i class="int1_title_main-blank_small"> </i>
                        <i class="int1_title_main-a">a</i>
                        <i class="int1_title_main-s">s</i>
                        <i class="int1_title_main-blank_small"></i>
                        <i class="int1_title_main-ui">I</i>
                        <i class="int1_title_main-blank_small"></i>
                        <i class="int1_title_main-p">p</i>
                        <i class="int1_title_main-r">r</i>
                        <i class="int1_title_main-o">o</i>
                        <i class="int1_title_main-p">p</i>
                        <i class="int1_title_main-h">h</i>
                        <i class="int1_title_main-e">e</i>
                        <i class="int1_title_main-s">s</i>
                        <i class="int1_title_main-i">i</i>
                        <i class="int1_title_main-e">e</i>
                        <i class="int1_title_main-d">d</i>
                        <i class="int1_title_main-dot">...</i>
                    </h1>
                    <h3 class="sp_int_title int1_desc js-ani"></h3>
                    <div class="fire_area">
                        <canvas id="fire"></canvas>
                        <div class="ashes">
                            <img id="ash1" src="image/fire_01.png" alt="" />
                            <img id="ash2" src="image/fire_02.png" alt="" />
                            <img id="ash3" src="image/fire_03.png" alt="" />
                        </div>
                    </div>
                </section>
                <section class="intro2">
                    <h3 class="sp_int_title int2_title js-ani"></h3>
                    <div class="int2_bgs">
                        <div class="int2_bg_light"></div>
                        <div class="int2_bg_card int2_bg_card-front">
                            <div class="int2_bg_card-front_mask js-card_mask"></div>
                        </div>
                        <div class="int2_bg_card int2_bg_card-left"></div>
                        <div class="int2_bg_card int2_bg_card-right1"></div>
                        <div class="int2_bg_card int2_bg_card-right2"></div>
                    </div>
                    <div class="int2_cards">
                        <div class="int2_card int2_card-priest js-card js-card_priest" data-section="1"></div>
                        <div class="int2_card int2_card-tower js-card" data-section="2"></div>
                        <div class="int2_card int2_card-dungeon js-card" data-section="3"></div>
                        <div class="int2_card int2_card-luke js-card" data-section="4"></div>
                    </div>
                </section>
                <div class="copy"></div>
            </article>
            <article class="sections" style="display: none;">
                <section class="section section1">
                    <div class="sec1_movie">
                        <!-- <video id="bgVideo" width="100%" height="100%" autoplay="" loop="">
                            <source src="./src/mp4/section1_bg.mp4">
                        </video> -->
                    </div>
                </section>
            </article>
        </div>
    </div>
</body>

</html>